<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Scoreboard Demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="scripts/scoreBoard.js"></script>
  <script>
  $(function() {
    $("#dialog").dialog({
      autoOpen: false,
      width: 500,
      modal: true,
      show: {
        effect: "fadeIn",
        duration: 1000
      },
      hide: {
        effect: "fadeOut",
        duration: 100
      },
      buttons: {
        Ok: function() {
          var playerName = $("#name").val();
          var score = $("#score").val();
          scoreBoard.add({name: playerName, score: score});
          $("#highScores").html(scoreBoard.display());
          $(this).dialog("close");
          $("#highScores").dialog("open");
        }
      }
    });
 
    $("#highScores").dialog({
      autoOpen: false,
      width: 500,
      modal: true,
      show: {
        effect: "fadeIn",
        duration: 1000
      },
      hide: {
        effect: "fadeOut",
        duration: 100
      },
      buttons: {
        Ok: function() {
          $(this).dialog( "close" );
        },
        Reset: function() {
          scoreBoard.reset();
          $("#highScores").html("<br>Scoreboard reset.");
        }
      }
    });
    $("#opener").click(function() {
      $("#dialog").dialog("open");
    });
  });
  </script>
</head>
<body>
 
<div id="dialog" title="New High Score">
  <p>Hey, this is a new highscore! Please enter your name below:</p>
  <input type="text" id="name" />
  <a href="https://twitter.com/share" target="_blank" class="twitter-share-button" 
      data-text="I got a highscore in the best Tetris game ever!">Tweet</a>
</div>

<div id="highScores" title="Top 5 Highscores">
</div>

<p>Score: <input type="text" id="score" /></p>
<button id="opener">Add to Scoreboard</button>
    <script src="scripts/twitterButton.js"></script>
</body>
</html>